<template>
  <div class="container">
    <i-notice-bar icon="systemprompt" loop>
    2018年世界杯,将于6月14日至7月15日举行;2018年世界杯,将于6月14日至7月15日举行;
    </i-notice-bar>
    <i-button type="info" v-if="canIUse" open-type="getUserInfo" lang="zh_CN" @getuserinfo="bindGetUserInfo">博饼</i-button>
    <i-button type="info" v-else>请升级你的微信</i-button>
    <i-button type="info" shape="circle" @click="leaderboard">排行榜</i-button>
    <i-button type="info" shape="circle" @click="prize">兑换奖品</i-button>
    <i-button type="info" shape="circle" @click="ceshi">ceshi</i-button>
    <a href="../rule/main">规则</a>
    <i-button @click="bindViewTap" type="info">千钟美酒</i-button>
    
  </div>
</template>

<script>
import {login} from '../../utils/api.js'
export default {
  data () {
    return {
      canIUse: wx.canIUse('button.open-type.getUserInfo'),
      userInfo: null
    }
  },
  methods: {
    bindViewTap () {
      const url = '../noPublic/main'
      wx.navigateTo({ url })
    },
    getUserInfo () {
      // 调用登录接口
      wx.login({
        success: () => {
          wx.getUserInfo({
            success: (res) => {
              this.userInfo = res.userInfo
            }
          })
        }
      })
    },
    clickHandle (msg, ev) {
      console.log('clickHandle:', msg, ev)
    },
    bindGetUserInfo (e) {
      const url = '../game/main'
      console.log(e.mp.detail.userInfo)
      // wx.showToast({
      //   title: '成功',
      //   icon: 'success',
      //   duration: 2000
      // })
      wx.setStorageSync('userInfo', e.mp.detail.userInfo)
      if (e.mp.detail.userInfo) {
        this.userInfo = e.mp.detail.userInfo
        wx.login({
                success: function(res) {
                  if (res.code) {
                    //发起网络请求
                    console.log(res.code)
                    // wx.request({
                    //   url: 'http://wegame.demo/api/weapp/authorizations',
                    //   data: {
                    //     code: res.code,
                    //     name: e.mp.detail.userInfo.nickName,
                    //     avatar: e.mp.detail.userInfo.avatarUrl
                    //   },
                    //   method: 'POST',
                    //   complete (response) {
                    //     if(response.statusCode === 201){
                    //       let accessToken = response.data.access_token
                    //     } else{
                    //       console.log('error');
                    //     }
                    //   }
                    // })
                  } else {
                    console.log('登录失败！' + res.errMsg)
                  }
                }
              })
          wx.navigateTo({ url })
      }
    },
    leaderboard () {
      const url = '../leaderboard/main'
      wx.navigateTo({ url })
    },
    prize () {
      const url = '../prize/main'
      wx.navigateTo({ url })
    },
    ceshi () {
      wx.chooseAddress({
        success: function (res) {
          console.log(res.userName)
          console.log(res.postalCode)
          console.log(res.provinceName)
          console.log(res.cityName)
          console.log(res.countyName)
          console.log(res.detailInfo)
          console.log(res.nationalCode)
          console.log(res.telNumber)
        }
})
    }
  },

  async created () {
      // let response = await api.authRequest('user')
      // console.log(response)
    // 调用应用实例的方法获取全局数据
    // this.getUserInfo()
    wx.getSetting({
      success: (res) => {
        if (res.authSetting['scope.userInfo']) {
          wx.getUserInfo({
            success: (res) => {
              this.userInfo = res.userInfo
              console.log('ok')
              login();
            }
          })
        }
      }
    })
  },
  mounted () {
    wx.showShareMenu({
        withShareTicket: true
    })
  }
}
</script>
<style scoped>
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
}
/* .container .navigation {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  
} */
.container a {
  width: 180rpx;
  height: 100rpx;
  line-height: 100rpx;
  background-color: #EA5149;
  border-radius: 15px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
}
</style>
